<template>
  <aside class="sidebar">
    <nav class="nav">
      <a href="#" class="nav-item">Dashboard</a>
      <a href="#" class="nav-item">Profile</a>
      <a href="#" class="nav-item">Settings</a>
      <a href="#" class="nav-item">Logout</a>
    </nav>
  </aside>
</template>

<script>
export default {
  name: 'AppSidebar'
}
</script>

<style scoped>
.sidebar {
  width: 250px;
  background-color: #f8f9fa;
  height: 100vh;
  padding: 1rem;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.nav {
  display: flex;
  flex-direction: column;
}

.nav-item {
  padding: 0.75rem 1rem;
  color: #2c3e50;
  text-decoration: none;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.nav-item:hover {
  background-color: #e9ecef;
}
</style>
